<template>
  <div class="wrapper">
    <div class="allOrderContainer">
      <!-- 订单操作 -->
      <div class="actions">
        <div class="left">
          <el-button
            data-tracker="P40-1"
            v-permission="'examine_create'"
            style="margin-bottom: 10px"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation('CREATE')"
            >创建</el-button
          >
          <el-button
            data-tracker="P40-4"
            v-permission="'examine_delete'"
            style="margin-bottom: 10px"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation('DELETE')"
            >删除</el-button
          >
        </div>
        <div class="right">
          <div class="right">
            <el-pagination
              background
              small
              :current-page="paginations.pageIndex"
              :page-sizes="paginations.pageSizes"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <el-table
        :max-height="maxheight"
        :data="tableData"
        border
        align="center"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column
          prop=""
          fixed
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column prop="name" label="审核流程名称"></el-table-column>
        <!-- <el-table-column prop="branch_name" label="组织部门"></el-table-column> -->
        <el-table-column prop="scene_type" label="审核类型">
          <template slot-scope="scope">
            {{
              [
                "",
                "应付审核",
                "报销审核",
                "备用金申请",
                "付款申请",
                "发票申请",
                "合同用章申请",
                "采购申请",
                "中通充值申请"
              ][scope.row.scene_type]
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-time="scope.row.update_time"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          fixed="right"
          align="center"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              data-tracker="P40-3"
              v-permission="'examine_detail'"
              style="margin-right: 10px"
              type="text"
              plain
              size="mini"
              @click="handleClickEdit(scope.row, 'detail')"
              >详情
            </el-button>
            <el-button
              data-tracker="P40-4"
              v-permission="'examine_update'"
              style="margin-right: 10px"
              type="text"
              plain
              size="mini"
              @click="handleClickEdit(scope.row, 'edit')"
              >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      :key="Math.random()"
      size="60%"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
    >
      <template slot="title">
        <div>
          {{ this.modetip }}
        </div>
      </template>
      <AuditProcess
        :mode="mode"
        :id="nowId"
        @close="handleCloseDrawer"
      ></AuditProcess>
    </el-drawer>
  </div>
</template>

<script>
import {
  ExamineListFn,
  ExamineCreateFn,
  ExamineDelete,
  ExamineUpdate,
  ExamineDetail,
} from "@/api/auditing";
import AuditProcess from "./auditprocess/auditprocess.vue";

export default {
  name: "auditprocesslist",
  components: { AuditProcess },
  props: [],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      tableData: [],
      searchParams: {},
      drawerVisible: false,
      mode: "",
      nowId: "",
      checkedRows: [],
      maxheight: "auto",
    };
  },
  computed: {
    modetip() {
      const { mode } = this;
      const text = "审核流程";
      if (mode === "add") {
        return `创建${text}`;
      } else if (mode === "edit") {
        return `修改${text}`;
      } else if (mode === "detail") {
        return `${text}详情`;
      }
    },
  },
  mounted() {
    this.getAuditList();
  },
  methods: {
    handleClickOperation(type) {
      if (type === "CREATE") {
        this.mode = "add";
        this.drawerVisible = true;
      } else if (type === "DELETE") {
        ExamineDelete({ ids: this.checkedRows }).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getAuditList();
          }
        });
      }
    },

    handleClose() {
      this.drawerVisible = false;
    },
    handleCloseDrawer(isUpdate) {
      this.drawerVisible = false;
      isUpdate && this.getAuditList();
    },

    handleClickEdit({ id }, mode) {
      this.nowId = id;
      this.mode = mode;
      this.drawerVisible = true;
    },
    handleSelectionChange(val) {
      this.checkedRows = val.map((item) => item.id);
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getAuditList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getAuditList();
    },
    getAuditList() {
      ExamineListFn({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
      }).then((res) => {
        this.paginations.total = res.data.total;
        this.tableData = res.data.list || [];
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 225;
        } else {
          this.maxheight = "auto";
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;

  .orderHeader {
    background-color: #fff;

    .orderSearch {
      ::v-deep .el-form--inline .el-form-item__content {
        vertical-align: middle;
      }

      ::v-deep .el-collapse {
        border-top: none;
        border-bottom: none;
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
  }
}
</style>